<template>
  <div>
    <div id="linechart">

    </div>
  </div>
</template>

<script setup lang="ts">
 import { Tooltip } from 'ant-design-vue';
import * as echarts from 'echarts';
  import {onMounted,ref} from 'vue'
    onMounted(()=>{
      makeLineChart();
    })
  let makeLineChart=()=>{
  // 1 准备好图标的操作实例
    let mycharts=echarts.init(document.getElementById("linechart"))
  //2 准备好配置项
      let option = {
        title:{
          text:"各业务系统在线用户数趋势Top3(近24h)"
        },
        tooltip:{ //提示功能
            formatter:'{a} <br /> 哈哈 {b} ---{c}'
            // formatter:()=>{
            //   return "自定义的内容"
            // }
        },
         legend: {
          data: ['法师', '战士'],
          right :0,
          top:30,
          icon:"rect",
          textStyle:{
            color:"#fff"
          },
          itemStyle:{
            color:"blue",
            inactiveColor:"#fff"
          }
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },

        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:"法师",
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            lineStyle:{
                color:"cyan",
                opacity:0.7
            },
            itemStyle:{
                opacity:0
            },
             areaStyle: {
               
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
                ])
             }
          },
           {
            name:"战士",
            data: [56, 34, 4, 56, 545, 34, 23],
            type: 'line',
             lineStyle:{
                color:"blue",
                opacity:0.7
            },
            itemStyle:{
                opacity:0
            },
             areaStyle: {
              color:"green"
             }
          }
        ]
      };
    // 3 将option设置给实例
    mycharts.setOption(option)
    }
</script>
<style lang="less" scoped>
  #linechart{
    width: 450px;
    height: 300px;
  }
</style>